<template>
    <div class="payment-detail">
        <c-wrap title="用水详情">
            <c-swiper ref="swipe" :data="swipeData" :initialIndex="initialIndex" :price="swipe.price"
                      :volume="swipe.volume" @click="clickIcon" @change="swiperChange"></c-swiper>
            <div :style="{height:height+'px','overflow-y':'auto'}" v-if="data.length>0">
                <mt-cell v-for="(item, index) in data" :key="index" :title="item.date">
                    <p style="font-weight: bolder">{{item.volume}}m³</p>
                    <p style="font-size: 14px;color: rgba(0,0,0,.8)">{{item.currentTime}}</p>
                </mt-cell>
            </div>
            <div v-else style="margin-top: 50px;">暂无数据</div>
            <mt-datetime-picker ref="picker" type="date" v-model="dateVal" :startDate="startDate" :endDate="endDate"
                                year-format="{value} 年" month-format="{value} 月" @confirm="confirmDate">
            </mt-datetime-picker>
        </c-wrap>
    </div>
</template>
<script>
    import CWrap from '../../components/CWrap'
    import CSwiper from '../../components/CSwiper'

    export default {
        components: {CWrap, CSwiper},
        data() {
            return {
                height: app.config.setting.height.display - app.config.setting.height.top - 228,
                dateVal: new Date(this.$route.params.month),
                swipe: {
                    price: 0,
                    volume: 0
                },
                data: []
            }
        },
        computed: {
            swipeData: function () {
                let data = [];
                let s = app.util.formatDate(new Date(), 'yyyy-01', {year: -2});
                let startDate = new Date(s);
                for (let i = 0; i < 36; i++) {
                    let d = app.util.formatDate(new Date(), 'yyyy-MM', {month: -i});
                    let t = app.util.formatDate(new Date(), 'yyyy年MM月', {month: -i});
                    let date = new Date(d);
                    if (date.getTime() < startDate.getTime()) break;

                    data.push({
                        date: d,
                        dateVal: t
                    });
                }
                data.reverse();
                return data;
            },
            initialIndex: function () {
                for (let i = 0; i < this.swipeData.length; i++) {
                    if (this.$route.params.month === this.swipeData[i].date) {
                        return i;
                    }
                }
            },
            startDate: function () {
                return new Date(this.swipeData[0].date)
            },
            endDate: function () {
                return new Date(this.swipeData[this.swipeData.length - 1].date)
            }
        },
        methods: {
            clickIcon(item, index) {
                for (let i = 0; i < this.swipeData.length; i++) {
                    if (this.$refs['swipe'].mySwiper.activeIndex === i) {
                        this.dateVal = new Date(this.swipeData[i].date);
                    }
                }
                document.getElementsByClassName("picker-slot-center")[2].style.display = 'none';
                this.$refs.picker.open();
            },
            confirmDate(date) {
                let d = app.util.formatDate(date, 'yyyy-MM');
                for (let i = 0; i < this.swipeData.length; i++) {
                    if (this.swipeData[i].date === d) {
                        this.$refs['swipe'].mySwiper.slideTo(i, 1000, false);
                    }
                }
            },
            loadData(month) {
                this.data = [];
                this.swipe.price = 0;
                this.swipe.volume = 0;
                app.ajax.get(app.config.api.statistics.detail, {
                    month: month
                }, (res) => {
                    this.swipe.price = res.data.price;
                    this.swipe.volume = res.data.volume;
                    res.data.list.forEach((val) => {
                        this.data.push({
                            date: val.date,
                            volume: val.volume,
                            currentTime: app.util.formatDate(val.currentTime, 'yyyy-MM-dd hh:mm:ss')
                        })
                    })
                })
            },
            swiperChange() {
                this.$nextTick(() => {
                    if (this.$refs['swipe'].mySwiper.activeIndex) {
                        let index = this.$refs['swipe'].mySwiper.activeIndex;
                        this.loadData(this.swipeData[index].date);
                    }
                })
            }
        }
    }
</script>
<style>
    .payment-detail .mint-cell-value {
        width: 70%;
        display: block;
        text-align: right;
    }
</style>
